<template>
  <div>
    <el-card shadow="never" style="margin: 10px 30px">
      <div slot="header">
        <span>{{ articleList.id ? '编辑文章':'新增文章' }}</span>
      </div>
      <el-form ref="form" :model="articleList" :rules="rules" label-width="80px" :inline="false" size="small">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <el-form-item label="标题" prop="title">
              <el-input v-model="articleList.title" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="作者" prop="author">
              <el-input v-model="articleList.author" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="是否显示">
              <el-switch
                v-model="articleList.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="文章概要" prop="summary">
          <el-input
            v-model="articleList.summary"
            style="width:800px"
            type="textarea"
            :rows="3"
            placeholder="摘要"
          />
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            ref="uploadImg"
            class="upload-demo"
            :before-upload="beforeUpload"
            action="/lejuAdmin/material/uploadFileOss"
            :headers="{ token }"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1500kb</div>
          </el-upload>
        </el-form-item>
        <img v-if="articleList.coverImg" :src="articleList.coverImg" class="urlImg">
        <el-button v-if="articleList.coverImg" type="text" style="color:red" size="mini" @click="delImg">删除图片</el-button>
        <el-form-item label="文章内容">
          <Tinymce v-model="tinContent" :height="400" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="doSave">立即保存</el-button>
          <el-button size="default">取消</el-button>
        </el-form-item>

      </el-form>
    </el-card>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getToken } from '@/utils/myAuth'
import { addArticle, updateArticle, productArticle } from '@/api/content/index'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      articleList: {
        title: '',
        author: '',
        summary: '',
        isShow: 1,
        coverImg: ''
      },
      tinContent: '',
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'change' }
        ],
        summary: [
          { required: true, message: '请输入文章概要', trigger: 'blur' },
          { min: 5, max: 300, message: '长度在 5 到 300 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    token() {
      return getToken()
    }
  },
  created() {
    console.log(this.$route.params.id)
    this.articleList.id = this.$route.params.id
    if (this.articleList.id) {
      this.getArticle()
    }
  },
  mounted() {

  },
  methods: {
    getArticle() {
      productArticle(this.$route.params.id).then(res => {
        console.log(res)
        const { message: errMag, data, success } = res
        if (success) {
          const { productArticle } = data
          this.articleList = productArticle
          this.articleList = productArticle
          this.tinContent = productArticle.content1
        } else {
          this.$message.error(errMag)
        }
      })
    },
    doSave() {
      this.articleList.content1 = this.tinContent
      this.articleList.content2 = this.tinContent
      console.log(this.articleList)
      this.$refs.form.validate((valid) => {
        if (valid) {
          var api
          if (this.articleList.id) {
            api = updateArticle
          } else {
            api = addArticle
          }
          api(this.articleList).then(res => {
            const { success, message: errmag } = res
            if (success) {
              this.$message.success('提交成功')
              this.$router.push({ name: 'contentArticle' })
            } else {
              this.$message.error(errmag)
            }
          })
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },
    upImg() {

    },
    delImg() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.articleList.coverImg = ''
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    handleSuccess(response, file, fileList) {
      const { success, data, message: errMag } = response
      if (success) {
        const { fileUrl } = data
        this.$message.success('请求成功')
        console.log(fileUrl)
        this.articleList.coverImg = fileUrl
        console.log(this.articleList.coverImg)
        this.$refs.uploadImg.clearFiles()
      } else {
        this.$message.error(errMag)
      }
    },
    beforeUpload(file) {
      var reg = /image\/(jpeg|png|jpg)/g
      const isImg = reg.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 1.5

      if (!isImg) {
        this.$message.error('上传头像只能是图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1.5MB!')
      }
      return isImg && isLt2M
    }
  }
}
</script>

<style scoped lang="scss">
    .urlImg{
        width: 100px;
        height: 100px;
    }
</style>
